<style lang="less">
.statisticbox{
	padding: 15px 20px;
	display: flex;
	flex-flow: column nowrap;
	.statisticbox-li{
		border-radius: 5px;
		overflow: hidden;
		text-align: center;
		background:#FFF;
		margin-bottom:10px;
		.one{
			color: #ffa81f;
		}
		.two{
			color: #ffdb21;
		}
		.three{
			color: #2196ff;
		}
		.title{
			padding: 5px 0;
			height: 36px;
			line-height: 36px;
			font-size: 16px;
			font-weight: 600;
		}
		.info{
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			padding: 20px;
			font-size: 14px;
			color: #424242;
			span:last-child{
				color: #f6c580;
			}
		}
	}
}
.vux-tab .vux-tab-item{
	font-size: 16px!important;
}
.active-6-2 {
  color: #009aee !important;
  border-bottom: 2px solid #009aee !important;
  font-size: 16px!important;
}
</style>
<template>
	<div class="container">
		<loading :show="isLoading" text="请稍候"></loading>
		<x-header title="个人中心"></x-header>
		<sticky :check-sticky-support="false" :offset="0">
			<tab :animate="false" :line-width="1">
				<tab-item active-class="active-6-2" @on-item-click="tabCategory(1)">全部</tab-item>
				<tab-item active-class="active-6-2" selected @on-item-click="tabCategory(2)">邀请统计</tab-item>
			</tab>
		</sticky>
		<div class="statisticbox" v-if="selected==2">
			<div class="statisticbox-li">
				<p class="title one">一级邀请</p>
				<p class="info vux-1px-t">
					<span>邀请人数： 0人</span>
					<span>累计奖励：0糖果</span>
				</p>
			</div>
			<div class="statisticbox-li">
				<p class="title two">一级邀请</p>
				<p class="info vux-1px-t">
					<span>邀请人数： 0人</span>
					<span>累计奖励：0糖果</span>
				</p>
			</div>
			<div class="statisticbox-li">
				<p class="title three">一级邀请</p>
				<p class="info vux-1px-t">
					<span>邀请人数： 0人</span>
					<span>累计奖励：0糖果</span>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		XHeader,
		Loading,
		Tab,
		TabItem,
		Sticky
	} from 'vux'
	export default {
		name: 'Statistics',
		components: {
			XHeader,
			Loading,
			Tab,
			TabItem,
			Sticky
		},
		data() {
			return {
				isLoading: false,
				selected:2
			}
		},
		directives: {

		},
		methods: {
			tabCategory(e) {
				this.selected = e;
			},
		},
		mounted() {

		}

	}
</script>